<template>
  <div class="w-full box-border p-16px">
    <div class="mg-b-16 bg-#ffffff p-16px rounded-8px">
      <filterComponent v-model:filter-data="filterData" @doSearch="handleSearch"/>
    </div>
    <el-card>
      <tableComponent class="set-height" :table-header="tableHeader" :needDetail="true" :table-data="tableData"
                      v-model:page-info="pageInfo" @pageChange="handlePageChange" @sort-change="sortMethod">
        <template #settings>
          <el-table-column fixed="right" label="操作" width="120">
            <template #default="scope">
              <el-button v-if="scope.row.isDelete===0" link type="primary" size="small" @click="delfn(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </template>
      </tableComponent>
    </el-card>
    <dialogImport v-model:show="showDialog" @refresh="handleRefresh"/>
  </div>
  <el-dialog :close-on-click-modal="false" v-model="dialogFormVisible" title="删除原因" width="400">
    <el-form :model="form" status-icon ref="ruleFormRef" @submit.prevent>
      <el-form-item label="删除原因" prop="remark" :rules="[
         { required: true, message: '请输入删除原因', trigger: 'blur' },
      ]">
        <el-input v-model="form.remark" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import {ref, onMounted, reactive} from 'vue'
import filterComponent from '@/components/filterComponent/index.vue'
import tableComponent from '@/components/tableComponent/index.vue'
import dialogImport from './components/dialogImport.vue'
import {getList, getSalesList, importBaobaiData, removesalesdydataapi} from '@/api/baobai/index.ts'

const showDialog = ref(false)

const ruleFormRef = ref()
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
  dialogFormVisible.value = false
}
const dialogFormVisible = ref(false)

const form = reactive({
  remark: '',
  id: ''
})

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      removesalesdydataapi({
        id: form.id,
        remark: form.remark,
        isDelete: 1,
        paymentStatus: 2
      }).then((res) => {
        console.log(res, '67e627867823456752678')
        getData()
      })
      resetForm(ruleFormRef.value)
    } else {
      console.log('error submit!', fields)
    }
  })
}
const filterData = ref({
  list: {
    companyName: {
      name: '客户名称',
      prop: 'companyName',
      value: '',
      placeholder: '请输入客户名称',
      type: 'input',
      inputType: 'text',
      handleFocus: (item) => {

      },
      handleChange: (item) => {

      },
      handleInput: (item) => {

      }
    },
    salesId: {
      name: '所属商务',
      prop: 'salesId',
      value: '',
      placeholder: '请选择',
      type: 'select',
      options: [],
      defaultAttrs: {
        label: 'salesName',
        value: 'id'
      },
      handleFocus: (item) => {
        getSalesList().then(res => {
          console.log(1111, res)
          item.options = res
        })
      },
      handleChange: (item) => {
      }
    },
    paymentStatus: {
      name: '状态',
      prop: 'paymentStatus',
      value: '',
      placeholder: '请选择',
      type: 'select',
      options: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '付款成功',
          value: 0
        },
        {
          label: '退款',
          value: 1
        },
        {
          label: '已删除',
          value: 2
        },
      ],
      defaultAttrs: {
        label: 'label',
        value: 'value'
      },
      handleFocus: (item) => {
      },
      handleChange: (item) => {
      }
    },
    paymentDate: {
      name: '付款时间',
      prop: 'paymentDate',
      value: [],
      placeholder: '请选择',
      type: 'date',
      dateType: 'date',
      handleFocus: (item) => {

      },
      handleChange: (item) => {
        console.log(1111, item.value)
      }
    },
  },
  buttonList: [
    {
      icon: 'Plus',
      name: '批量导入',
      click: () => {
        showDialog.value = true
      }
    }
  ]
})

const pageInfo = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0
})

const tableHeader = ref([
  {
    label: '客户名称',
    prop: 'companyName',
    width: 200,
  },
  {
    label: '商务负责人',
    prop: 'salesName',
    width: 120,
  },
  {
    label: '所属分组',
    prop: 'deptName',
  },
  {
    label: '开户金额',
    prop: 'price',
    width: 100,
    prefix: '¥',
    style: {
      color: '#FF7642'
    }
  },
  {
    label: '状态',
    prop: 'paymentStatus',
    width: 100
  },
  {
    label: '付款时间',
    prop: 'paymentDate',
    width: 120,
    sortable: 'custom'
  },
  {
    label: '付款方式',
    prop: 'paymentType',
    width: 120
  },
  {
    label: '开通时间',
    prop: 'openDate',
    width: 120,
    sortable: 'customer'
  },
  {
    label: '到期时间',
    prop: 'endDate',
    width: 120,
    sortable: 'customer'
  },
  {
    label: '销售场景',
    prop: 'salesScenario',
  },
  {
    label: '删除原因',
    prop: 'remark',
    default: '--'
  }
])

const sortOrder = ref('')
const sortField = ref('')

const tableData = ref([])

const sortMethod = (orderInfo) => {
  if (orderInfo.order) {
    const map = {
      ascending: 'ASC',
      descending: 'DESC'
    }
    sortField.value = orderInfo.prop,
        sortOrder.value = map[orderInfo.order]
  } else {
    sortField.value = null
    sortOrder.value = null
  }
  getData()
}

const handleSearch = () => {
  getData()
}

const handlePageChange = () => {
  getData()
}

const delfn = (res) => {
  console.log(res, 2222)
  dialogFormVisible.value = true
  form.id = res.id
  form.remark = ''
}

const createQuery = () => {
  const query = {}
  for (const key in filterData.value.list) {
    if (filterData.value.list[key].prop === 'date') {
      query.startTime = filterData.value.list[key].value?.length ? filterData.value.list[key].value[0] : ''
      query.endTime = filterData.value.list[key].value?.length ? filterData.value.list[key].value[1] : ''
    } else {
      query[filterData.value.list[key].prop] = filterData.value.list[key].value
    }
  }
  return query
}

const toLine = (name) => {
  if (!name) return ''
  return name.replace(/([A-Z])/g, '_$1').toLowerCase()
}

const getData = () => {
  getList({
    ...createQuery(),
    pageSize: pageInfo.value.pageSize,
    pageNum: pageInfo.value.pageNum,
    sortField: toLine(sortField.value),
    sortOrder: sortOrder.value
  }).then(res => {
    tableData.value = res.list
    pageInfo.value.total = res.totalCount
  })
}

const handleRefresh = () => {
  pageInfo.value.pageNum = 1
  getData()
}

onMounted(() => {
  getData()
})
</script>
<style lang="scss" scoped>
.container {
  padding: 16px;
}
</style>
